<template>
    <div class="create-work-container">
        <h1>发布作品</h1>
        <!-- 这里添加发布作品的表单等内容，例如： -->
        <form>
            <label for="title">标题:</label>
            <input type="text" id="title" v - model="workTitle" />
            <label for="image">图片 URL:</label>
            <input type="text" id="image" v - model="workImage" />
            <!-- 其他表单字段 -->
            <button type="submit" @click.prevent="submitWork">提交</button>
        </form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const workTitle = ref('');
const workImage = ref('');

const submitWork = async () => {
    try {
        const response = await axios.post('http://localhost:10086/commity/community-content/createContent', {
            title: workTitle.value,
            imageUrl: workImage.value
            // 其他表单数据
        });
        console.log('作品发布成功:', response.data);
    } catch (error) {
        console.error('作品发布失败:', error);
    }
};
</script>

<style scoped>
.create-work-container {
    padding: 20px;
}

form {
    margin-top: 20px;
}

label {
    display: block;
    margin-top: 10px;
}

input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    box-sizing: border - box;
}

button {
    background-color: #007AFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
</style>